<template>
  <div class="app-container">
    <el-form>
      <el-card class="mt-1">
        <el-row :gutter="15">
          <el-col :span="5">
            <el-form-item label="改造人员" required>
              <el-select v-model="form.userId" placeholder="改造人员" clearable filterable>
                <el-option label="赵某某" :value="1" />
                <el-option label="钱某某" :value="2" />
                <el-option label="孙某某" :value="3" />
                <el-option label="李某某" :value="4" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button icon="el-icon-plus" type="primary" @click="handleAddItem">
              新增改造项
            </el-button>
          </el-col>
        </el-row>

        <el-row v-for="(formItem, index) in form.items" :key="index" :gutter="15">
          <el-col :span="5">
            <el-form-item label="改造项目" required>
              <el-cascader
                v-model="formItem.revampTypes"
                class="w-100"
                :options="revampTypesData"
                placeholder="改造项目"
                clearable
                :props="{ label: 'name', value: 'name' }"
              />
            </el-form-item>
          </el-col>

          <el-col :span="5">
            <el-form-item label="物品/材料明细" required>
              <el-input v-model="formItem.details" clearable />
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item label="改造金额" required>
              <el-input v-model="formItem.amount" clearable />
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item label="通过检查金额" required>
              <el-input v-model="formItem.passAmount" clearable />
            </el-form-item>
          </el-col>

          <el-col :span="2">
            <el-button type="danger" circle icon="el-icon-minus" />
          </el-col>
        </el-row>
      </el-card>

      <el-form-item class="mt-5">
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import revampTypes from "@/assets/data/revamp-types";
import router from "@/router";
import { CascaderOption } from "element-plus";

defineOptions({
  name: "RevampAdd",
});

const revampTypesData = ref<CascaderOption[]>(revampTypes as CascaderOption[]);

interface FormItem {
  revampTypes: string[];
  details: string;
  amount: string;
  passAmount: string;
}

const form = ref<{
  userId: number | string;
  items: FormItem[];
}>({
  userId: "",
  items: [
    {
      revampTypes: [],
      details: "",
      amount: "",
      passAmount: "",
    },
    {
      revampTypes: [],
      details: "",
      amount: "",
      passAmount: "",
    },
  ],
});

function handleAddItem() {
  form.value.items.push({
    revampTypes: [],
    details: "",
    amount: "",
    passAmount: "",
  });
}

function onSubmit() {
  ElMessage.success("保存成功");
  setTimeout(() => {
    // 返回到列表页面
    router.back();
  }, 2000);
}
</script>

<style lang="scss" scoped></style>
